/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */

<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 联系我们微信二维码、电话 -->
		<view class="contact" v-if="wechatshow">
			<image :src="base_set.wechat" mode="aspectFit"></image>
			<view @click="make_phone1"><text>电话：{{base_set.phone}}</text><button type="primary" size="mini">一键拨号</button></view>
			<image class="closebtn" src="../../static/close.png" mode="aspectFit" @click="closewechat"></image>
		</view>
		<!-- 结业证书 -->
		<view class="certshow" v-if="cert_show" @click="close_cert">
			<image :src="hbsrc" mode="aspectFit"></image>
		</view>
		<!-- 会员等级遮罩 -->
		<view class="viplevelshow" v-if="viplevel_lock">
			<text>仅限会员等级为<text>{{menuinfo.levelname}}</text>及以上才可以观看</text>
			<button type="primary" @click="sjvip">去升级会员</button>
		</view>
		<!-- 课程有效期遮罩 -->
		<view class="kcyxq" v-if="kcyxq_lock">
			<image class="yxq-c-btn" src="../../static/close.png" mode="aspectFit" @click="close_yxqbtn"></image>
			<view class="kcyxq-box1">
				<view class="kcyxq-box1-courseimg">
					<image :src="menuinfo.thumb?menuinfo.thumb:'' " mode="aspectFill"></image>
					<text>¥{{menuinfo.new_yxqdata[btnnum1].price}}</text>
				</view>
				<view class="kcyxq-box1-chooseSize">
					<view class="yxq-text">有效期</view>
					<view class="kcyxq-box1-chooseSize-datas">
						<text class="kcyxq-box1-chooseSize-datas-item" :class="{_yxqborder: btnnum1 == index}" @click="yxqchange(item,index)" v-for="(item,index) in menuinfo.new_yxqdata" :key="index">{{item.name}}</text>
					</view>
				</view>
				<button type="primary" @click="checkYxq">确认</button>
			</view>
		</view>
		<!-- 媒体部分 -->
		<view class="shipinpart">
			<view class="shipinpart-media">
				<!-- 视频 -->
				<video v-if="videostate === 'video'" class="video" id="myVideo" 
				:model="menuinfo" :src="videosrc" 
				@error="videoErrorCallback"
				@timeupdate="video_timeUpdate" 
				@fullscreenchange="fullscreen" 
				@play='video_onplay'
				@pause='video_onpause'
				@ended='video_onend'
				:controls="video_controls" 
				autoplay show-center-play-btn enable-play-gesture
				x5-video-player-type="h5"
				x5-video-player-fullscreen="true"
				x5-video-orientation="portrait">
				</video>
				<!-- 音频 -->
				<view v-else-if="videostate === 'audio'" class="audio">
					<image :src="menuinfo.thumb?menuinfo.thumb:'' " mode="aspectFill" :class="gaosi?'audio_bg gaosi_filter':'audio_bg' "></image>
					<view class="bofang" @click="play">
						<image :src="audio_paused?'../../static/play-big.png':'../../static/pause1.png'" mode=""></image>
					</view>
					<view class="audio-wrapper">
						<view class="qbtn" @click="change_slide(-1)">后退15秒</view>
						<view class="audio-number">{{currentTime?currentTime:'00:00'}}</view>
						<slider class="audio-slider" block-size="16" min="0" max="100" :value="progress" @changing="progress_text" @change="progress_change" activeColor="#2f77ff" backgroundColor="#e9e9e9"></slider>
						<view class="audio-number">{{durationTime?durationTime:'00:00'}}</view>
						<view class="qbtn" @click="change_slide(1)">前进15秒</view>
					</view>

				</view>
				
				<!-- 图片 -->
				<image v-else :src="menuinfo.thumb?menuinfo.thumb:'' " mode="aspectFill" ></image>
			</view>
			<view class="shipinpart-info">
				<text class="info-span1">{{menuinfo.menuname}}<text v-if="menuinfo.is_sw==1" style="color: #DD524D;">[实物]</text></text>
				<view class="info-span2">
					<text>{{menuinfo.jianjie}}</text>
					<text>{{menuinfo.levelname}}</text>
				</view>
				<view class="info-span5">
					<text class="info-span3">
						<text>{{coursehour}}课时</text>
						<text>|</text>
						<text>{{menuinfo.viewnum ? menuinfo.viewnum : '0'}}人学过</text>
						<text v-if="menuinfo.endtime_cn"> | 有效期至:{{menuinfo.endtime_cn?menuinfo.endtime_cn:''}}</text>
					</text>
					<text class="info-span4" v-if="action=='' && is_sh==1"></text>
					<text class="info-span4" v-if="action=='' && is_sh==0">￥{{menuinfo.price}}</text>
					<text class="info-span4" v-if="action=='credit' ">{{creditinfo.credit}}积分 + ¥{{creditinfo.price}}</text>
					<text class="info-span4" v-if="action=='seckill' ">秒杀价:￥{{seckillinfo.price}}</text>
					<text class="info-span4" v-if="action=='pintuan' ">拼团价:￥{{pintuaninfo.price}}</text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 课程介绍、课程目录、附件、用户评价 -->
		<view class="kechengpart">
			<view class="kechengpart-title">
				<view class="kechengpart-title-item" v-for="(item, index) in kechengList" :key="index">
					<view @click="muluchange(index)" :class="{btna:btnnum == index}">{{item}}</view>
					<text :class="{_underline: btnnum == index}"></text>
				</view>
			</view>
			<view class="kechengpart-content">
				<!-- 课程介绍 -->
				<view class="kcjs" :class="{dis:btnnum == 0}" :model="teacher">
					<view class="kcjs-lecturer">
						<view class="kcjs-lecturer-top">
							<image src="../../static/kechengjiangshi.png" mode=""></image>
							<text>课程讲师</text>
						</view>
						<view class="jiangshi-right" @click="jsdetail">
							<text>讲师主页</text>
							<image src="../../static/jt.png" mode=""></image>
						</view>
						<view class="kcjs-lecturer-bottom" >
							<image :src="teacher.img?teacher.img:'' " mode="aspectFit"></image>
						</view>
					</view>
					<view class="kcjs-brief">
						<view class="kcjs-brief-top">
							<image src="../../static/kechengjianjie.png" mode=""></image>
							<text>课程简介</text>
						</view>
						<view class="kcjs-brief-center">
							<jyf-parser :html="menuinfo.introduce" ></jyf-parser>
						</view>
					</view>
				</view>
				
				
				<!-- 课程目录 -->
				<view class="kcml" :class="{dis:btnnum == 1}">
					<view class="kcml-list" v-for="(item,index1) in courses" :key="index1" @click="unlock(item,index1)">
						<view class="kcml-list-left" >
							<view class="kcml-list-left-left">
								<view class="yinpin" v-if="item.media === 'audio'">音频</view>
								<view class="shipin" v-else-if="item.media === 'video'">视频</view>
								<view class="tuwen" v-else>图文</view>
								<view :class="[(nowplay == index1)?'_nowplayed':'' ]">{{(index1+1)+' . '+item.coursename}}</view>
							</view>
							<view class="kcml-list-left-right">
								<text v-if="item.progress !=0">已学{{item.progress}}%</text>
							</view>
						</view>
						<view class="kcml-list-right" v-if="!is_free && item.is_pay==0">
							<view v-if="item.is_sk == 1">
								<text v-if="item.media == 'video'">试看</text>
								<text v-else-if="item.media == 'audio'">试听</text>
								<text v-if="item.media == 'tuwen'">试读</text>
							</view>
							<image v-else-if="item.is_sk == 0" src="../../static/lock.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<!-- 课件下载 -->
				<view class="kejian" :class="{dis:btnnum == 2}">
					<view class="kejian-list" v-if="files.length > 0">
						<view class="item" v-for="(item, index) in files" :key="index">
							<view>
								<text>{{index + 1}}.</text>
								<image v-if='item.type==1' src="../../static/img.png" mode="aspectFit"></image>
								<image v-else-if='item.type==2' src="../../static/xls.png" mode="aspectFit"></image>
								<image v-else-if='item.type==3' src="../../static/pdf.png" mode="aspectFit"></image>
								<image v-else-if='item.type==4' src="../../static/doc.png" mode="aspectFit"></image>
								<image v-else-if='item.type==5' src="../../static/ppt.png" mode="aspectFit"></image>
								<image v-else-if='item.type==0' src="../../static/file.png" mode="aspectFit"></image>
								<text>{{'['+item.media+']'}}</text>
								<text>{{item.name}}</text>
							</view>
							<view @click="download(item.path,item.type)">
								<image src="../../static/download.png" mode="aspectFit"></image>
								<text style="color: #4CD964;font-weight: 700;">下载</text>
							</view>
						</view>
					</view>
					<image v-else class="nopl" src="../../static/wudingdan.png" mode="aspectFit"></image>
				</view>
				<!-- 提问、作业打卡 -->
				<view class="yhpj" :class="{dis:btnnum == 3}">
					<view class="fabuBtn" @click="daka">
						<text>作业打卡</text>
					</view>
					<view class="yhpj-list" v-if="dianpings.length > 0">
						<view class="item" v-for="(item, index) in dianpings" :key="index">
							<view class="item-right">
								<view class="item-right-top">
									<image class="item-left" :src="item.avatar" mode="aspectFill"></image>
									<text>{{item.nickname}} UID:{{item.uid}}</text>
									<text>{{item.addtime}}</text>
									<text :style="item.is_dp == 0?'color:red;':'color:green;'">{{item.is_dp == 0?'等待点评':'已点评'}}</text>
								</view>
								<view class="item-right-bottom">
									<text>{{item.detail}}</text>
								</view>
								<view class="item-right-files">
									<image :src="item.img" mode="aspectFit" @click="showimg(item.img)"></image>
									<video :src="item.video"></video>
								</view>
							</view>
							<view class="pingyu">
								<view v-if="item.is_dp==1">
									<text style="color: green;">老师评语：{{item.dianping}}</text>
									<text>点评时间：{{item.dptime}}</text>
								</view>
							</view>
						</view>
					</view>
					<image v-else class="nopl" src="../../static/wudingdan.png" mode="aspectFit"></image>
				</view>
				<!-- 用户评价 -->
				<view class="yhpj" :class="{dis:btnnum == 4}">
					<view class="yhpj-list" v-if="comment.length > 0">
						<view class="item" v-for="(item, index) in comment" :key="index">
							<view class="item-right">
								<view class="item-right-top">
									<image class="item-left" :src="item.avatar" mode="aspectFit"></image>
									<text>{{item.nickname}}</text>
									<text>{{item.addtime}}</text>
								</view>
								<view class="item-right-bottom">
									<text>{{item.comment}}</text>
								</view>
							</view>
						</view>
					</view>
					<image v-else class="nopl" src="../../static/nopl.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 立即购买 -->
		<view class="buy">
			<view class="buy-left" @click="dingyue">
				<image src="../../static/shoucang.png" mode=""></image>
				<text v-if="!is_dingyue">收藏</text>
				<text v-if="is_dingyue">已收藏</text>
			</view>
			<button class="buy-left sharebtn" open-type="share" @click="shareBtn">
				<image src="../../static/fenxiang.png" mode=""></image>
				<text style="color: #848484;">分享</text>
			</button>
			<view class="buy-left" @click="make_cert">
				<image src="../../static/cert.png" mode=""></image>
				<text>证书</text>
			</view>
			<button class="buy-left kefu" open-type="contact" @click="contact">
				<image src="../../static/kefu.png" mode="aspectFit"></image>
				<text>客服</text>
			</button>
			<view class="buy-right" @click="pay1" v-if="!is_free && action=='' ">立即学习</view>
			<view class="buy-right" @click="exchange" v-if="!is_free && action=='credit' ">立即兑换</view>
			<view class="buy-right" @click="seckill" v-if="!is_free && action=='seckill' ">立即秒杀</view>
			<view class="buy-right" @click="pintuan" v-if="!is_free && action=='pintuan' ">开始拼团</view>
			<view class="buy-right" @click="study_now" v-if="is_free">免费</view>
		</view>
		<zaudio></zaudio>
		<view class="share_img" v-if="share_img_show" @click="close_h5_share">
			<image src="../../static/h5_share.png" mode=""></image>
		</view>

		<!-- 遮罩层 -->
		<view v-if="commentFlag" @click="hideComment" style="width: 100%;
		height: 100vh; background-color: rgba(9,9,9,.7); position: fixed; top: 0; left: 0;"></view>
		<view class="post-comments" v-if="commentFlag">
			<textarea class='uni-input' cursor-spacing="10" v-model="tiwenText" placeholder="请输入提问或作业打卡内容"/>
			<view class="file">
				<view><image @click="upLoadImg" :src="loadImg !='' ? loadImg : '../../static/default-image.png'" mode="aspectFit"></image></view>
				<view style="margin-left: 10rpx;">
					<view style="font-size: 25rpx;">上传作业打卡照片(支持jpg、png格式图片)</view>
					<view style="font-size: 20rpx;">文件地址:{{imgsrc}}</view>
					<view style="color: #DD524D;">{{img_uploadtext}}</view>
				</view>
			</view>
			<view class="file">
				<view><image @click="upLoadVideo" :src="'../../static/default-image.png'" mode="aspectFit"></image></view>
				<view style="margin-left: 10rpx;">
					<view style="font-size: 25rpx;">上传作业打卡视频(仅支持180M以下大小的MP4格式视频文件)</view>
					<view style="font-size: 20rpx;">文件地址:{{daka_videosrc}}</view>
					<view style="color: #DD524D;">{{video_uploadtext}}</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				提问/作业内容是否需要公开？
			</view>
			<radio-group @change="radioChange" style="margin-top: 20rpx;">
				<radio value="1" :checked="currentRadio==1?true:false" />是
				<radio style="margin-left: 10rpx;" value="0" :checked="currentRadio==0?true:false" />否
			</radio-group>
			<view class="icon">
				<button  type="default" style="width: 50%; font-size: 24upx;background-color: #007AFF;color: #fff;"
					@click="tijiao()">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import {checkUserinfo} from '@/request/checkUserinfo'
	// #ifndef MP-WEIXIN || APP-PLUS || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-JD
	const innerAudioContext = uni.createInnerAudioContext()
	// #endif
	// #ifdef MP-WEIXIN || APP-PLUS || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-JD
	const innerAudioContext = uni.getBackgroundAudioManager();
	// #endif
	export default {
		components:{
			jyfParser
		},
		data() {
			return {
				kechengList: ['简介', '目录', '课件','打卡','评价'],
				btnnum: 0,
				commentFlag:false,//控制评论框弹出
				coursemenus: [],
				menuinfo: [],
				teacher: [],
				courses: [],
				comment: [],
				files: [],
				HOST_URL: uni.HOST_URL,
				videostate: '',
				currentTime:0,//当前音频已播放时间秒
				durationTime: 0, //音频的总时长秒
				coursehour: 0 ,// 课时
				audio_paused:true,
				progress:0,//音频或视频进度百分比
				gaosi:false,
				t1:'',
				t2:'',//video计时器id
				t3:'',//audio计时器id
				videosrc:'',
				free_time:'',
				video_controls:true,
				videofullscreen:false,
				video_currentTime:0,//视频当前已播放时长秒
				video_duration:0,//视频总时长秒
				menuid:'',
				sonid:'',
				videoStudyTime: 0,//秒
				audioStudyTime: 0,//秒
				is_free:false,
				son_is_pay:false,
				uid:'',
				is_dingyue:false,
				videoContext:{},
				creditinfo:{},
				action:'',
				seckillinfo:{},
				pintuaninfo:{},
				is_sh:1,
				share_img_show: false,
				viplevel_lock:false,
				kcyxq_lock:false,
				btnnum1:0,
				nowplay:-1,
				new_yxqdata:{},
				hbsrc:'',
				cert_show:false,
				is_seek:false,
				allcourses_study_ok:false,
				loadImg: '',
				loadVideo: '',
				imgsrc:'',
				daka_videosrc:'',
				img_uploadtext:'',
				video_uploadtext:'',
				img_tempFilePath:'',
				video_tempFilePath:'',
				tiwenText:'',
				currentRadio:0,
				dianpings:[],
				wechatshow:false,
				base_set:[],
			}
		},
		onShareTimeline(){
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			var pid;
			if (userinfo.uid == '' || !userinfo.uid) {
				pid = userinfo.uid
			}else{
				pid = 0
			}
			return {
			  title: this.menuinfo.menuname,
			  query: 'pid='+pid,
			  imageUrl: this.menuinfo.thumb
			}
		},
		onShareAppMessage(res) {
			// #ifdef MP
			uni.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if (userinfo.uid == '' || !userinfo.uid) {
				uni.navigateTo({
					url: '../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			} else {
				if (res.from === 'button') {
		
				}
				return {
					title: this.menuinfo.menuname,
					path: `${path_share}?pid=${userinfo.uid}`,
					imageUrl:this.menuinfo.thumb
				}
			}
			// #endif
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(e) {
			console.log(e)
			// checkUserinfo()
			//#ifdef MP
			var BASE_URL = uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/set/base_set',
				method:'GET',
				success:(res) =>{
					console.log(res.data);
					this.base_set=res.data.data
					let set=res.data.data
					if(set.smallapp){
						this.is_free=set.smallapp.is_sh==1?true:false
						this.is_sh=set.smallapp.is_sh
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
			//#endif
			this.base_set = uni.getStorageSync('base_set')
			let userinfo = uni.getStorageSync('userinfo')
			if(userinfo){
				this.uid=userinfo.uid	
			}
			
			this.menuid=e.menuid
			var BASE_URL = uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/courses/index',
				data: {
					menuid:e.menuid,
					uid:this.uid
				},
				method:'POST',
				success:(res) =>{
				console.log(res.data)
				if(res.data.data.menuinfo.new_yxqdata){
					this.new_yxqdata = res.data.data.menuinfo.new_yxqdata[0]
				}
				this.is_dingyue=res.data.data.is_dingyue==1?true:false
				this.comment = res.data.data.comment
				this.files = res.data.data.files
				this.dianpings = res.data.data.dianpings
				this.menuinfo = res.data.data.menuinfo
				if(res.data.data.menuinfo.lid!=0){
					this.viplevel_lock = true
					if(userinfo && userinfo.userdata){
						if(userinfo.userdata.viplevelid>=res.data.data.menuinfo.lid){
							this.viplevel_lock = false
							this.is_free=true
						}
					}
				}else{
					if(userinfo && userinfo.userdata){
						// console.log(userinfo)
						if(userinfo.userdata.is_vip==1){
							this.is_free=true
						}
					}
				}
				
				this.teacher = res.data.data.teacher
				this.courses = res.data.data.courses
				this.coursehour = this.courses.length
				if(this.menuinfo.price==0 || this.menuinfo.is_pay==1){
					this.is_free=true
				}
				// #ifdef H5
				const HOST_URL=this.HOST_URL
				var menuinfo=this.menuinfo
				if(userinfo && userinfo.uid){
					var link=window.location.href+'&pid='+userinfo.uid
				}else{
					var link=window.location.href
				}
				if (this.$jwx && this.$jwx.isWechat()) {
					this.$jwx.share({
						'title': menuinfo.menuname,
						'desc': menuinfo.jianjie,
						'link': link,
						'img_url': menuinfo.thumb,
					})
					this.$jwx.sharepyq({
						'title': menuinfo.menuname,
						'link': link,
						'img_url':menuinfo.thumb,
					})
				}
				// #endif
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
			if(e.action){
				this.action=e.action
				if(e.action=='credit'){
					this.get_creditinfo(e.menuid,'course')
				}else if(e.action=='seckill'){
					this.get_seckillinfo(e.menuid,'course')
				}else if(e.action=='pintuan'){
					this.get_pintuaninfo(e.menuid,'course')
				}
			}
			

		},
		onShow(){
			// console.log('nowplay'+this.nowplay);
			let audio = innerAudioContext;
			audio.onTimeUpdate((e) => {
				this.durationTime = this.format(audio.duration)
				this.currentTime = this.format(audio.currentTime)
				
				let progress=(audio.currentTime/audio.duration).toFixed(2)
				this.progress=progress*100
				if(!this.is_free){
					if(!this.son_is_pay){
						console.log('当前时间',audio.currentTime)
						console.log('免费时间',this.free_time)
						if(audio.currentTime >= this.free_time){
							audio.pause()
							this.currentTime='00:00'
							audio.seek(0)
							this.progress=0
							let content = this.menuinfo.one_lock==1?'需要解锁此单节课吗?':'解锁整个目录即可观看全部课程'
							uni.showModal({
								title: '试听结束',
								content: content,
								success: (res) =>{
									if (res.confirm) {
										this.menuinfo.one_lock==1?this.pay():this.pay1();
									} else if (res.cancel) {
										this.currentTime='00:00'
										audio.seek(0)
										this.progress=0
									}
								}
							});
						}
					}
				}
				// console.log(this.currentTime)
			})
			// #ifndef MP-WEIXIN || APP-PLUS || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-JD
			audio.onSeeked((e) => {
				this.currentTime = this.format(audio.currentTime)
			})
			// #endif
			audio.onPlay((e) => {
				this.videoContext.pause()
				this.video_duration = 0
				this.video_currentTime = 0
				this.audio_paused=false
				this.gaosi_ani()
				this.gaosi=true
				this.countAtime()
				// setTimeout(()=>{
				// 	if(this.progress !=0 && audio.durationTime != 0 && this.is_seek == false){
				// 		var seek_second = parseInt(audio.durationTime*this.progress);
				// 		audio.seek(seek_second);
				// 		this.is_seek = true;
				// 		uni.showToast({
				// 			title:'您上次听到了'+seek_second+'秒',
				// 			icon:'none'
				// 		});
				// 	}
				// },800)
			})
			audio.onPause((e) => {
				this.audio_paused=true
				clearInterval(this.t1)
				clearInterval(this.t3)
				this.gaosi=false
				this.saveAtime()
			})
			audio.onStop((e) => {
				this.audio_paused=true
				clearInterval(this.t1)
				clearInterval(this.t3)
				this.saveAtime()
			})
			audio.onEnded((e) => {
				clearInterval(this.t1)
				clearInterval(this.t3)
				this.audio_paused=true
				this.currentTime='00:00'
				audio.seek(0)
				this.saveAtime()
			})
		},
		onUnload() {
			this.saveAtime()
			this.saveVtime()
			clearInterval(this.t1)
			clearInterval(this.t2)
			clearInterval(this.t3)
			this.menuid=''
			this.sonid=''
			this.btnnum1=0
			this.nowplay=''
			this.progress = 0
			this.durationTime = 0
			this.currentTime = 0
			this.video_duration = 0
			this.video_currentTime = 0
		},
		methods: {
			make_phone1(){
				if(this.shop_phone!=''){
					uni.makePhoneCall({
						phoneNumber: this.shop_phone
					});
				}else{
					uni.showToast({
						title:'暂未设置客服联系方式！',
						icon:'none'
					})
				}
			},
			closewechat(){
				this.wechatshow=false
			},
			getsetting(){
				let base_set =this.base_set= uni.getStorageSync('base_set')
				this.shop_phone=base_set.phone
			},
			study_now(){
				this.btnnum = 1;
				uni.showToast({
					title:'请点击课程进行学习',
					icon:'none'
				})
			},
			showimg(e){
				console.log(e)
				// #ifdef H5
				window.open(e);
				// #endif
				// #ifndef H5
				uni.downloadFile({
				    url: e,
				    success: (res) => {
				        if (res.statusCode === 200) {
							uni.previewImage({
							  urls: [res.tempFilePath],
							  longPressActions: {
								  itemList: ['发送给朋友', '保存图片', '收藏'],
								  success: function(data) {
									  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								  },
								  fail: function(err) {
									  console.log(err.errMsg);
								  }
							  }
							});
				        }else{
							uni.hideLoading();
							uni.showModal({
							    title: '下载报错原因:',
							    content: JSON.stringify(res),
							    success: (res)=> {
							        if (res.confirm) {
							        }
							    }
							});
						}
				    }
				});
				// #endif
			},
			radioChange(evt) {
				this.currentRadio = evt.detail.value
			},
			tijiao(){
				checkUserinfo();
				if(this.tiwenText == ''){
					uni.showToast({
						title:'请输入提问/作业打卡内容',
						icon:'none'
					})
					return false;
				}
				const BASE_URL = uni.BASE_URL;
				let userinfo=uni.getStorageSync('userinfo')
				uni.request({
					url: BASE_URL+'index/courses/daka',
					data:{
						menuid:this.menuid,
						uid:userinfo.uid,
						detail:this.tiwenText,
						img:this.imgsrc,
						video:this.daka_videosrc,
						is_gk:this.currentRadio,
						tid:this.teacher.id
					},
					method:'POST', 
					success:(res) =>{
						if(res.data.code == 0){
							this.commentFlag = false;
							uni.showToast({
								title:'打卡成功',
							})
						}else{
							console.log(res.data);
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
				
			},
			upLoadImg() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: (res)=> {
						console.log(res)
						
						this.img_tempFilePath = res.tempFilePaths[0];
						if(this.img_tempFilePath !=''){
							uni.showLoading({
							    title: '上传中'
							})
							// this.uploadStart()
							let BASE_URL = uni.BASE_URL
							uni.uploadFile({
								url: BASE_URL+'index/Upload/upload', //仅为示例，非真实的接口地址
								filePath: this.img_tempFilePath,
								name: 'file',
								success: (res1) => {
									let data=res1.data
									console.log(data)
									this.img_uploadtext = '√上传成功'
									this.imgsrc=data
									this.loadImg=data
									uni.hideLoading()
								}
							})
						}
					}
				})
			},
			upLoadVideo() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res)=> {
						console.log(res)
						
						this.video_tempFilePath = res.tempFilePath;
						if(this.video_tempFilePath !=''){
							uni.showLoading({
							    title: '上传中'
							})
							let BASE_URL = uni.BASE_URL
							uni.uploadFile({
								url: BASE_URL+'index/Upload/upload', //仅为示例，非真实的接口地址
								filePath: this.video_tempFilePath,
								name: 'file',
								success: (res1) => {
									let data=res1.data
									console.log(data)
									this.video_uploadtext = '√上传成功'
									this.daka_videosrc=data
									uni.hideLoading()
								}
							})
						}
					}
				})
			},
			hideComment(){
				this.commentFlag = false;
			},
			daka(){
				this.commentFlag = true;
			},
			download(url,type){
				if(this.menuinfo.price != 0){
					if(this.is_free == false){
						uni.showModal({
						    title: '温馨提示',
						    content: '非免费课件，请您购买整个课程后即可开启下载',
						    success: (res)=> {
						        if (res.confirm) {
									this.pay1()
						        }
						    }
						});
						return false;
					}
				}
				// #ifndef H5
				uni.showLoading({
					title:'下载中...'
				})
				uni.downloadFile({
				    url: url,
				    success: (res) => {
				        if (res.statusCode === 200) {
								if(type==1){
									uni.previewImage({
									  urls: [res.tempFilePath],
									  longPressActions: {
										  itemList: ['发送给朋友', '保存图片', '收藏'],
										  success: function(data) {
											  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
										  },
										  fail: function(err) {
											  console.log(err.errMsg);
										  }
									  }
									});
								}else{
									uni.saveFile({
									  tempFilePath: res.tempFilePath,
									  success: (res)=> {
										  uni.hideLoading();
										  uni.showToast({
											title:'下载成功'
										  })
										  var savedFilePath = res.savedFilePath;
										  uni.showModal({
										      title: '文件保存地址为',
										      content: savedFilePath,
											  confirmText:'预览文件',
										      success: (res)=> {
										          if (res.confirm) {
													  uni.openDocument({
														filePath: savedFilePath,
														showMenu: true,
														success: (res)=> {
															console.log('打开文档成功');
														}
													  });
										          }
										      }
										  });
									  }
									});
								}
				        }else{
							uni.hideLoading();
							uni.showModal({
							    title: '下载报错原因:',
							    content: JSON.stringify(res),
							    success: (res)=> {
							        if (res.confirm) {
							        }
							    }
							});
						}
				    }
				});
				// #endif
				// #ifdef H5
				window.open(url);
				// #endif
			},
			close_cert(){
				this.cert_show=false
			},
			check_sons_progress(){
				for(var i=0;i<this.courses.length;i++){
					if(this.courses[i].progress != 100 && this.courses[i].media != 'tuwen'){
						uni.showToast({
							title:'请学完所有课程后再来申请合成证书！',
							icon:'none'
						})
						break;
						this.allcourses_study_ok = false;
					}else{
						this.allcourses_study_ok = true;
					}
				}
			},
			make_cert(){
				this.check_sons_progress();
				if(this.allcourses_study_ok == true){
					checkUserinfo()
					uni.showLoading({
					    title: '加载中'
					});
					let userinfo=uni.getStorageSync('userinfo')
					const BASE_URL = uni.BASE_URL
					var apptype;
					//#ifdef MP
					apptype='MP'
					//#endif
					//#ifdef H5
					apptype='H5'
					//#endif
					//#ifdef APP-PLUS
					apptype='APP-PLUS'
					//#endif
					uni.request({
						url: BASE_URL+'index/courses/hbhc',
						data:{
							imgkey:1,
							menuid:this.menuid,
							userid:userinfo.uid,
							apptype:apptype
						},
						method:'POST',
						success:(res) =>{
							console.log(res.data);
							this.cert_show=true
							this.hbsrc=res.data.data.imgpath
							uni.hideLoading()
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}
			},
			yxqchange(item,index){
				console.log(item)
				this.new_yxqdata = item
				this.btnnum1 = index
			},
			close_yxqbtn(){
				this.kcyxq_lock = false
			},
			sjvip(){
				uni.navigateTo({
					url:'../vip/vip'
				})
			},
			close_h5_share (){
				this.share_img_show = false
			},
			shareBtn (){
				// #ifdef H5
					this.share_img_show = true
				// #endif
				// #ifdef APP-PLUS
					uni.showToast({
						title:'请用H5、小程序版本进行分享',
						icon:'none'
					})
				// #endif
			},
			contact (){
				// #ifndef MP
					this.wechatshow = true
				// #endif
			},
			jsdetail(){
				uni.navigateTo({
					url:'../teacher-center/tutor-introduced/tutor-introduced?tid='+this.teacher.id
				})
			},
			get_creditinfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/credit/creditinfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.creditinfo=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			get_seckillinfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/seckill/seckillinfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.seckillinfo=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			get_pintuaninfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pintuan/pintuaninfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.pintuaninfo=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			saveStudytime(studytime,media,menuid,sonid){
				const BASE_URL = uni.BASE_URL
				if(this.uid == ''){
					return false
				}
				uni.request({
					url: BASE_URL+'index/user/save_studytime',
					method:'POST',
					data:{
						uid:this.uid,
						media:media,
						studytime:studytime,
						progress:this.progress,
						menuid:menuid,
						sonid:sonid
					},
					success:(res) =>{
						console.log(res.data);
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			saveAtime(){
				if(this.uid == ''){
					return false
				}
				var atime=uni.getStorageSync('atime')
				var data={}
				if(atime){
					data.atime=atime.atime+this.audioStudyTime
					data.nowtime=(new Date()).getTime()
					uni.setStorageSync('atime',data)
					this.saveStudytime(data.atime,'audio',this.menuid,this.sonid)
				}else{
					data.atime=this.audioStudyTime
					data.nowtime=(new Date()).getTime()
					uni.setStorageSync('atime',data)
					this.saveStudytime(data.atime,'audio',this.menuid,this.sonid)
				}
			},
			saveVtime(){
				if(this.uid == ''){
					return false
				}
				var vtime=uni.getStorageSync('vtime')
				var data={}
				if(vtime){
					data.vtime=vtime.vtime+this.videoStudyTime
					data.nowtime=(new Date()).getTime()
					uni.setStorageSync('vtime',data)
					this.saveStudytime(data.vtime,'video',this.menuid,this.sonid)
				}else{
					data.vtime=this.videoStudyTime
					data.nowtime=(new Date()).getTime()
					uni.setStorageSync('vtime',data)
					this.saveStudytime(data.vtime,'video',this.menuid,this.sonid)
				}
			},
			countVtime(){
				if(this.uid == ''){
					return false
				}
				this.t2=setInterval(()=>{
					this.videoStudyTime++
					//console.log(this.videoStudyTime)
				},1000)
			},
			countAtime(){
				if(this.uid == ''){
					return false
				}
				this.t3=setInterval(()=>{
					this.audioStudyTime++
					//console.log(this.audioStudyTime)
				},1000)
			},
			dingyue(){
				if(this.uid == ''){
					return false
				}
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/courses/dingyue',
					method:'POST',
					data:{
						uid:this.uid,
						media:this.menuinfo.media,
						menuid:this.menuid,
						goodstype:'course'
					},
					success:(res) =>{
						console.log(res.data);
						this.is_dingyue=res.data.data==1?true:false
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			pay(){
				if(this.uid == ''){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				if(this.sonid==''){
					uni.navigateTo({
						url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course'
					})
				}else{
					uni.navigateTo({
						url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&sonid='+this.sonid+'&goodstype=course'
					})
				}
			},
			// 选择有效期并支付
			checkYxq(){
				uni.navigateTo({
					url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course'+'&yxqdata='+JSON.stringify(this.new_yxqdata)
				})
			},
			pay1(){
				if(this.uid == ''){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				if(this.menuinfo.is_yxq == 1){
					this.kcyxq_lock = true
					return false
				}
				uni.navigateTo({
					url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course'
				})
			},
			exchange(){
				if(this.uid == ''){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course&action=credit'
				})
			},
			seckill(){
				if(this.uid == ''){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course&action=seckill'
				})
			},
			pintuan(){
				if(this.uid == ''){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url:'/pages/confirm-order-form/confirm-order-form?menuid='+this.menuid+'&goodstype=course&action=pintuan'
				})
			},
			fullscreen(e){
				this.videofullscreen=e.detail.fullScreen
			},
			video_onplay(){
				this.countVtime()
				let audio = innerAudioContext;
				audio.pause()
				this.durationTime = 0
				this.currentTime = 0
				// setTimeout(()=>{
				// 	if(this.progress !=0 && this.video_duration != 0 && this.is_seek == false){
				// 		var seek_second = parseInt(this.video_duration*this.progress);
				// 		console.log(this.video_duration,this.progress,seek_second);
				// 		this.videoContext.seek(seek_second);
				// 		this.is_seek = true;
				// 		uni.showToast({
				// 			title:'您上次看到了'+seek_second+'秒',
				// 			icon:'none'
				// 		});
				// 	}
				// },800)
			},
			video_onpause(){
				clearInterval(this.t2)
				this.video_duration = 0
				this.saveVtime()
			},
			video_onend(){
				clearInterval(this.t2)
				this.video_duration = 0
				this.saveVtime()
			},
			video_timeUpdate(e){
				let video_currentTime =e.detail.currentTime
				let video_duration =e.detail.duration 
				
				let progress=(video_currentTime/video_duration).toFixed(2)
				this.progress=progress*100
				if(!this.is_free || !this.son_is_pay){
					if(!this.son_is_pay){
						if(video_currentTime>=this.free_time){
							if(this.videofullscreen){
								this.videoContext.exitFullScreen()
							}
							this.videoContext.pause()
							let content = this.menuinfo.one_lock==1?'需要解锁此单节课吗?':'解锁整个目录即可观看全部课程'
							uni.showModal({
								title: '试看结束',
								content: content,
								success:(res) => {
									if (res.confirm) {
										this.menuinfo.one_lock==1?this.pay():this.pay1();
									} else if (res.cancel) {
										this.videoContext.seek(0)
									}
								}
							});
						}
					}
				}
			},
			gaosi_ani(){
				if(this.gaosi==true){
					this.t1=setInterval(function(){
						this.gaosi=false
						if(this.gaosi==false){
							this.gaosi=true
						}
					},4000)
				}
			},
			progress_text(e){
				let audio=innerAudioContext
				let progress=e.detail.value
				this.currentTime = this.format((progress/100)*audio.duration)
			},
			progress_change(e){
				let audio=innerAudioContext
				let progress=e.detail.value
				this.currentTime = this.format((progress/100)*audio.duration)
				audio.seek((progress/100)*audio.duration)
			},
			change_slide(e){
				let audio=innerAudioContext;
				if(e==1){
					audio.seek(audio.currentTime+15)
				}else{
					audio.seek(audio.currentTime-15)
				}
			},
			play(){
				let audio=innerAudioContext;
				if(audio.paused){
					audio.play()
					//this.audio_paused=false
				}else{
					audio.pause()
					//this.audio_paused=true
				}
			},
			muluchange(e) {
				this.btnnum = e
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			unlock (item,index) {
				this.is_seek = false;
				this.progress = 0;
				if(item.freesecond){
					this.free_time=item.freesecond;
				}
				this.nowplay = index
				this.sonid=item.id
				var menu_free=this.is_free || item.is_pay==1?1:0
				if(this.is_free || item.is_pay==1){
					this.son_is_pay=true
					if(item.media === 'video') {
						this.videostate = 'video'
						this.videosrc = item.src

					} else if (item.media === 'audio') {
						this.videostate = 'audio'
						if(item.src){
							
							this.gaosi=true
							let audio=innerAudioContext;
							//#ifndef MP-WEIXIN
							audio.src = item.src
							audio.autoplay = true

							//#endif
							//#ifdef MP-WEIXIN
							audio.title = item.coursename;
							audio.singer = this.teacher.imgname;
							audio.coverImgUrl = this.menuinfo.thumb;
							audio.src = item.src;
							//#endif
						}
					} else {
						uni.navigateTo({
							url: '/pages/tuwen/tuwen?twid='+item.id+'&is_free='+menu_free+'&menuid='+this.menuid,
						})
					}
				}else{
					this.son_is_pay=false
					if(item.is_sk==1){
						
						if(item.media === 'video') {
							this.videostate = 'video'
							this.videosrc = item.src
						} else if (item.media === 'audio') {
							this.videostate = 'audio'
							if(item.src){
								this.gaosi=true
								let audio=innerAudioContext;
								//#ifndef MP-WEIXIN
								audio.src = item.src
								audio.autoplay = true
								//#endif
								//#ifdef MP-WEIXIN
								audio.title = item.coursename;
								audio.singer = this.teacher.imgname;
								audio.coverImgUrl = this.menuinfo.thumb;
								audio.src = item.src;
								//#endif
							}
						} else {
							uni.navigateTo({
								url: '/pages/tuwen/tuwen?twid='+item.id+'&is_free='+menu_free,
							})
						}
					}else{
						if(this.menuinfo.one_lock==0){
							uni.showModal({
								title: '提示',
								content: '请先解锁整个课程目录',
								success: (res) => {
									if (res.confirm) {
										this.pay1()
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							});
						}else{
							uni.showModal({
								title: '提示',
								content: '要解锁单个课程吗?',
								success: (res) => {
									if (res.confirm) {
										this.pay()
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							});
						}
					}
				}
			},
			//格式化时长
			format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
					Math.floor(num % 60)).length) + Math.floor(num % 60)
			}
		}
	}
</script>
<style lang="less" scoped>
page{
	background-color: #f3f3f3;
	font-family: SimHei;
}
	.contact{
		background: rgba(9,9,9,.6);
		position: fixed;
		height: 100vh;
		width: 100%;
		top:0;
		left:0;
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		view{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 80upx;
			margin-top: 30upx;
			text{
				color: #fff;
				margin-right: 20upx;
			}
		}
		.closebtn{
			width: 40upx;
			height: 40upx;
			margin-top: 50upx;
		}
		image{
			width: 60%;
		}
	}
	.file {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 10rpx;
		image,video {
			width: 150upx;
			height: 150upx;
			border: 2upx dotted #eee;
			border-radius: 10upx;
			box-shadow: 5upx 5upx 5upx 5upx #ddd;
		}
		
		text {
			font-size: 30upx;
			color: #333;
		}
	}
	.post-comments{
		box-sizing: border-box;
		width: 100%;
		height: 850upx;
		background-color: #fff;
		border-top: 2upx solid #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 40upx 20upx;
		z-index: 9999;
		textarea{
			width: 95%;
			border: 2upx solid #ccc;
			height: 150upx;
			margin: 0 auto;
			padding: 10rpx;
		}
		.icon{
			margin-top: 20upx;
			width: 100%;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;bottom:20rpx;left: 0;
		}
	}
.fabuBtn {
	z-index: 999;
	position: fixed;
	bottom: 150upx;
	right: 50upx;
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	background: #00b58a;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text{
		color:#fff;
		font-size:20upx;
	}
	image {
		width: 100%;
		height: 100%;
	}
}
.certshow{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgba(9,9,9,.7);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 30upx;
	image{
		width: 80%;
		height: 80%;
	}
}
.viplevelshow{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgba(9,9,9,.6);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 30upx;
	text{
		margin-bottom: 20upx;
		text{
			color: #d9aa23;
		}
	}
}
.kcyxq{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgba(9,9,9,.6);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 30upx;
	.yxq-c-btn{
		width: 50rpx;
		height: 50rpx;
		z-index: 999;
		margin-left: 90%;
		margin-top: 50rpx;
	}
	&-box1{
		padding: 15rpx 0;
		height: 50%;
		width: 100%;
		background-color: #fff;
		position: absolute;
		left:0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-courseimg{
			padding-left: 10rpx;
			color:#ff1e2e;
			display: flex;
			image{
				width: 200rpx;
				height: 130rpx;
			}
			text{
				margin-left: 20rpx;
			}
		}
		&-chooseSize{
			border-top: 1rpx solid #eee;
			padding-left: 10rpx;
			.yxq-text{
				margin: 15rpx 0;
				font-weight: 700;
			}
			&-datas{
				display: flex;
				width: 100%;
				&-item{
					font-size: 25rpx;
					min-width: 30rpx;
					background-color: #f1f1f1;
					padding: 10rpx 15rpx;
					margin: 10rpx;
					border-radius: 5rpx;
					
				}
				._yxqborder{
					border: 1rpx solid red;
				}
			}
			
		}
		button{
			width: 100%;
			height: 80rpx;
			margin: 0px;
			padding: 0px;
			/*自定义边框*/
			border: 0px;
			/*消除默认点击蓝色边框效果*/
			outline: none;
			background-color: #ff1e2e;
			border-radius: 40rpx;
		}
	}
}
.share_img{
	width: 100%;
	height: 100vh;
	position: fixed;
	left:0;
	top:0;
	z-index: 999;
	image{
		width:100%;
		height: 100%;
	}
}
.container {
	background-color: #f3f3f3;
}

// 视频部分
.shipinpart {
	//height:550upx;
  padding-bottom: 15px;
	background-color: #fff;
	&-media {
		height: 320upx;
		background-color: #fff;
		.video {
			width: 750upx;
			height: 320upx;
		}
		.audio_bg{
			position: absolute;
			z-index: -19;
			transition:all .4s cubic-bezier(0.42,0,0.58,1) 0s;
		}
		.donghua(@DHname){
			@keyframes @DHname {
				0%{
					filter: blur(0upx);
				}
				5%{
					filter: blur(1upx);
				}
				10%{
					filter: blur(2upx);
				}
				15%{
					filter: blur(3upx);
				}
				20%{
					filter: blur(4upx);
				}
				25%{
					filter: blur(5upx);
				}
				30%{
					filter: blur(6upx);
				}
				35%{
					filter: blur(7upx);
				}
				40%{
					filter: blur(8upx);
				}
				45%{
					filter: blur(9upx);
				}
				50%{
					filter: blur(10upx);
				}
				55%{
					filter: blur(9upx);
				}
				60%{
					filter: blur(8upx);
				}
				65%{
					filter: blur(7upx);
				}
				70%{
					filter: blur(6upx);
				}
				75%{
					filter: blur(5upx);
				}
				80%{
					filter: blur(4upx);
				}
				85%{
					filter: blur(3upx);
				}
				90%{
					filter: blur(2upx);
				}
				95%{
					filter: blur(1upx);
				}
				100%{
					filter: blur(0upx);
				}
			}
		};
		.donghua(myDongHua);
		.animation(@animation-name,@animation-duration,@animation-iteration-count){
		    animation: @arguments;
		}
		.gaosi_filter{
			.animation(myDongHua,4s,infinite);
			transition:all 4s cubic-bezier(0.42,0,0.58,1) 0s;
		}
		image {
			width: 100%;
			height: 320upx;
		}
		.audio {
			width: 100%;
			height: 320upx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 19;
			padding-bottom: 20upx;
			.bofang {
				width: 80upx;
				height: 80upx;
				view{
					font-size: 35upx;
					font-weight: 700;
					color: orangered;
				}
				image {
					width: 80upx;
					height: 80upx;
				}
			}
			&-wrapper {
				width:100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				color: #333;
				background-image: linear-gradient(to bottom, rgba(255,255,255,.25), #fff);
				.prev, .next {
					width: 48upx;
					height: 44upx;
					border-radius: 50%;
					margin: 0 20upx;
					box-shadow: inset 0 0 10upx 5upx rgba(248, 248, 248, 1.0), 0 0 10upx 3upx rgba(226, 226, 226, 0.5);
				}
				.qbtn{
					margin: 0 6upx;
					font-size: 28upx;
				}
				.audio-number {
					font-size: 24upx;
					color: #333;
					// letter-spacing: 3rpx;
				}
				.audio-slider {
					flex: 1;
					
				}
			}
		}
	}
	&-info {
		z-index: 19;
		padding: 0 20upx;
		display: flex;
		flex-direction: column;
		.info-span1 {
			margin-top: 35upx;
			font-size: 32upx;
			font-weight: 700;
			color: #070707;
			letter-spacing: 5upx;
		}
		.info-span2 {
			letter-spacing: 5upx;
			font-size: 26upx;
			color: #373737;
			margin-top: 16upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text:nth-child(2) {
				letter-spacing: 1upx;
				width: 110upx;
				height: 43upx;
				border-radius: 10upx;
				background-color: #e4edff;
				color: #4b89ff;
				text-align: center;
				line-height: 43upx;
				margin-left: 50upx;
				margin-right: 30upx;
				box-shadow:0upx 2upx 3upx 1upx #8dbeff;
			}
		}
		.info-span5{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.info-span3 {
			margin-top: 18upx;
			font-size: 24upx;
			color: #b3b3b3;
			display: flex;
			align-items: center;
			text:nth-child(2) {
				margin: 0 15upx;
			}
		}
		.info-span4 {
			margin-top: 22upx;
			color: #ff6229;
			font-size: 32upx;
			margin-right: 40upx;
		}
	}
}


// 课程部分
.kechengpart {
	margin-top: 10upx;
	&-title{
		height: 125upx;
		// background-color: red;
		background-color: #fff;
		padding-top: 45upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			view {
			font-size: 30upx;
			color: #575757;
			}
			.btna { // 需要追加到view上的class
				font-weight: 700;
				color: #131313;
			}
			._underline { // 需要追加到view下方的下划线class
				width: 70upx;
				height: 7upx;
				background-color: #2f77ff;
				border-radius: 5upx;
				margin-top: 15upx;
			}
		}
		
	}
	
	&-content {
		// 课程简介
		.kcjs {
			padding: 0 20upx;
			background-color: #fff;
			display: none;
			&-lecturer {
				&-top {
					height: 60upx;
					display: inline-flex;
					image {
						width: 47upx;
						height: 33upx;
						margin-top: 4upx;
					}
					text {
						font-size: 26upx;
						font-weight: 700;
						color: #020202;
						margin-left: 15upx;
					}
				}
				.jiangshi-right {
					display: inline-flex;
					align-items: center;
					float: right;
					text {
						font-size: 22upx;
						color: #6d6d6d;
						margin-right: 0;
					}
					image {
						width: 20upx;
						height: 22upx;
						margin-left: 5upx;
					}
				}
				&-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 100%;
						height: 400upx;
					}
					.jiangshi-left {
						display: flex;
						align-items: center;
						image {
							width: 80upx;
							height: 80upx;
							border-radius: 40upx;
						}
						text {
							font-size: 26upx;
							color: #333;
							margin-left: 20upx;
						}
					}
					.jiangshi-right {
						display: flex;
						align-items: center;
						text {
							font-size: 26upx;
							color: #C0C0C0;
							margin-right: 0;
						}
						image {
							width: 20upx;
							height: 26upx;
							margin-left: 5upx;
						}
					}

				}
			}
			&-brief{
				margin-top: 40upx;
				padding-bottom: 150upx;
				&-top {
					height: 75upx;
					display: flex;
					image {
						width: 53upx;
						height: 49upx;
					}
					text {
						font-size: 26upx;
						font-weight: 700;
						color: #020202;
						margin-left: 15upx;
						margin-top: 4upx;
					}
				}
				&-center {
					padding-bottom:30upx;
					text {
						font-size: 26upx;
						color: #313131;
					}
				}
			}
		}
		
		// 课程目录
		.kcml {
			display: none;
			padding: 0 20upx;
			background-color: #fff;
			margin-bottom:150rpx;
			&-list {
				padding: 20upx 10upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #eee;
				&-left {
					width: 90%;
					min-height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 90%;
						._nowplayed{
							color: red !important;
						}
						.yinpin {
							color: #ff6969;
							border: 2upx solid #ff6969;
						}
						.shipin {
							color: #398cff;
							border: 2upx solid #398cff;
						}
						.tuwen {
							color: #8bc34a;
							border: 2upx solid #8bc34a;
						}
						view:nth-child(1) {
							font-size: 20upx;
							width: 50rpx;
							margin-right: 10rpx;
							border-radius: 10upx;
							text-align: center;
						}
						view:nth-child(2) {
							font-size: 25upx;
							color: #070707;
							display: inline-block;
							width: 80%; 
						}
					}
					&-right{
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							width: 106rpx;
							font-size: 22upx;
							color: #ff6229;
						}
					}

				}
				&-right {
					display: flex;
					align-items: center;
					justify-content: center;
					text {
						font-size: 28upx;
						color: #007AFF;
						vertical-align: middle;
					}
					image {
						width: 30upx;
						height: 30upx;
						vertical-align: middle;
					}
				}
			}
		}
		.kejian{
			display: none;
			text-align: center;
			background-color: #fff;
			&-list{
				.item{
					font-size: 25rpx;
					color: #555;
					letter-spacing: 5rpx;
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					display: flex;
					padding: 25rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					view{
						display: flex;
						align-items: center;
					}
				}
			}
			.nopl{
				width: 500upx;
			}
			.dis{
				display: block;
			}
		}
		.yhpj {
			display: none;
			text-align: center;
			margin-bottom: 140upx;
			background-color: #fff;
			padding: 20rpx 0;
			&-list {
				.pingyu{
					width: 100%;
					display: block;
					padding: 10rpx;
					view{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						text{
							padding: 10rpx;
							font-size: 26rpx;
						}
					}
					
					button{
						margin-top: 10rpx;
					}
				}
				.item {
					display: flex;
					flex-direction: column;
					padding:15upx;
					justify-content: start;
					align-items: center;
					border-top: 1rpx solid #eee;
					border-bottom: 1rpx solid #eee;
					&-left {
						width: 50upx;
						height: 50upx;
						border-radius: 35upx;
						margin-right: 10upx;
					}
					&-right {
						width: 100%;
						display: flex;
						flex-direction: column;
						&-top {
							font-weight: 700;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text:nth-child(1) {
								font-size: 28upx;
								color: #333;
							}
							text:nth-child(2) {
								font-size: 26upx;
								color: #999;
							}
						}
						&-bottom {
							max-width: 500upx;
							padding: 15upx 0;
							background-color: #fff;
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							align-items: flex-start;
							text:first-child{
								font-weight: 700;
							}
							text {
								font-size: 28upx;
								font-weight: 400;
								color: #333;
								padding: 10rpx;
							}
						}
						&-files{
							display: flex;
							align-items: center;
							justify-content: space-around;
							image{
								width: 200upx;
								height: 300upx;
							}
							video{
								width: 300upx;
								height: 200upx;
							}
						}
					}
				}
			}
		}
		// 用户评价
		// .yhpj {
		// 	display: none;
		// 	text-align: center;
		// 	margin-bottom: 140upx;
		// 	background-color: #fff;
		// 	padding: 20rpx 0;
		// 	&-list {
		// 		.item {
		// 			display: flex;
		// 			padding:20upx;
		// 			justify-content: start;
		// 			align-items: center;
		// 			border-top: 1rpx solid #eee;
		// 			border-bottom: 1rpx solid #eee;
		// 			&-left {
		// 				width: 70upx;
		// 				height: 70upx;
		// 				border-radius: 35upx;
		// 				margin-right: 20upx;
		// 			}
		// 			&-right {
		// 				width: 100%;
		// 				display: flex;
		// 				flex-direction: column;
		// 				&-top {
		// 					font-weight: 700;
		// 					display: flex;
		// 					align-items: center;
		// 					justify-content: space-around;
		// 					text:nth-child(1) {
		// 						font-size: 28upx;
		// 						color: #333;
		// 					}
		// 					text:nth-child(2) {
		// 						font-size: 26upx;
		// 						color: #999;
		// 					}
		// 				}
		// 				&-bottom {
		// 					max-width: 500upx;
		// 					margin-top: 10upx;
		// 					padding: 15upx 0;
		// 					background-color: #fff;
		// 					text {
		// 						font-size: 28upx;
		// 						font-weight: 400;
		// 						color: #333;
		// 					}
		// 				}
		// 				&-files{
		// 					display: flex;
		// 					align-items: center;
		// 					justify-content: space-around;
		// 					image{
		// 						width: 200upx;
		// 						height: 300upx;
		// 					}
		// 					video{
		// 						width: 300upx;
		// 						height: 200upx;
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// }
		.nopl{
			width: 334upx;
			height: 243upx;
			margin-top: 20upx;
		}
		.dis{
			display: block;
		}
	}
}


.buy {
	width: 100%;
	height: 122upx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	border-radius: 20upx 20upx 0 0;
	border-top: 1rpx solid #eee;
	.kefu {
	  margin: 0;
	  padding: 0;
	  outline: none;
	  border-radius: 0;
	  background-color: transparent;
	  line-height: inherit;
	  width: max-content;
	}
	.kefu:after{
		border: none;
	}
	&-left {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		image {
			width: 28upx;
			height: 28upx;
		}
		text {
			margin-top: 15upx;
			font-size: 24upx;
			color: #ff6229;
		}
	}
	.sharebtn {
	  margin: 0;
	  padding: 0;
	  outline: none;
	  border-radius: 0;
	  background-color: transparent;
	  line-height: inherit;
	  width: max-content;
	}
	.sharebtn:after {
	  border: none;
	}
	&-right {
		width: 300upx;
		height: 80upx;
		background-image: linear-gradient(to right, #4498ff, #1763ff);
		border-radius: 50upx;
		font-size: 32upx;
		font-weight: 700;
		color: #fff;
		// border: 3upx solid #fff;
		text-align: center;
		line-height: 80upx;
		box-shadow: 0rpx 2rpx 2rpx 1rpx #8dbeff;
		letter-spacing: 3rpx;
	}
}
</style>
